<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<head>
    <th:block th:include="include :: header('添加新的工作计划')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<style>
</style>
<body class="white-bg">
    <div id="app" class="wrapper wrapper-content animated fadeInRight ibox-content">
        <el-form id="mondayFrom" :model="Monday" ref="dynamicValidateForm"  class="demo-dynamic" label-position="left">
            <el-form-item
                    label="日期"
                    label-position="left">
                <el-input :style="{width:'15rem',display:'inline-block'}" v-model="Monday.projectDate" readonly="true" ></el-input>
                <span>{{Monday.days}}</span>
            </el-form-item>
            <el-form-item label="时段">
                <el-tag>{{Monday.morning.projectTime}}</el-tag> <el-button style="margin-left: 5%" type="primary" @click="addMondayMorning">新增该时段工作计划</el-button>
            </el-form-item>
            <el-form id="mondayFromLable" :model="Monday.morning"  v-for="(item, index) in Monday.morning.visitList" ref="dynamicValidateForm"  class="demo-dynamic"  inline="true">
                <el-form-item label="拜访单位:" inline="true">
                    <el-input :style="{width:'15rem',display:'inline-block'}" v-model="item.visitUnit"></el-input>
                </el-form-item>
                <el-form-item label="拜访科室:" inline="true">
                    <el-input :style="{width:'15rem',display:'inline-block'}" v-model="item.visitDept"></el-input>
                </el-form-item>
                <el-form-item label="拜访人物:" inline="true">
                    <el-input :style="{width:'15rem',display:'inline-block'}" v-model="item.visitPeople"></el-input>
                </el-form-item>
                <el-form-item label="拜访目的:" inline="true" >
                    <el-input type="textarea" :rows="2" :style="{width:'30rem',display:'inline-block'}" v-model="item.visitTarget"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="交通工具:"  >
                    <el-checkbox-group v-model="item.transportation" :style="{width:'30rem',display:'inline-block'}">
                        <el-checkbox v-for="transportation in transportations" :label="transportation" :key="transportation">{{transportation}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="出差人员:"  >
                    <el-checkbox-group v-model="item.fromMan" :style="{width:'30rem',display:'inline-block'}">
                        <el-checkbox v-for="deptManList in deptManList"  :label="deptManList.userName" :key="deptManList.userName">{{deptManList.userName}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <el-form-item label="时段">
                <el-tag>{{Monday.afternoon.projectTime}}</el-tag> <el-button style="margin-left: 5%" type="primary" @click="addMondayAfternoon">新增该时段工作计划</el-button>
            </el-form-item>
            <el-form id="mondayFromLable" :model="Monday.afternoon"  v-for="(item, index) in Monday.afternoon.visitList" ref="dynamicValidateForm"  class="demo-dynamic"  inline="true">
                <el-form-item label="拜访单位:" inline="true">
                    <el-input :style="{width:'15rem',display:'inline-block'}" v-model="item.visitUnit"></el-input>
                </el-form-item>
                <el-form-item label="拜访科室:" inline="true">
                    <el-input :style="{width:'15rem',display:'inline-block'}" v-model="item.visitDept"></el-input>
                </el-form-item>
                <el-form-item label="拜访人物:" inline="true">
                    <el-input :style="{width:'15rem',display:'inline-block'}" v-model="item.visitPeople"></el-input>
                </el-form-item>
                <el-form-item label="拜访目的:" inline="true" >
                    <el-input type="textarea" :rows="2" :style="{width:'30rem',display:'inline-block'}" v-model="item.visitTarget"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="交通工具:"  >
                    <el-checkbox-group v-model="item.transportation" :style="{width:'30rem',display:'inline-block'}">
                        <el-checkbox v-for="transportation in transportations" :label="transportation" :key="transportation">{{transportation}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="出差人员:"  >
                    <el-checkbox-group v-model="item.fromMan" :style="{width:'30rem',display:'inline-block'}">
                        <el-checkbox v-for="deptManList in deptManList"  :label="deptManList.userName" :key="deptManList.userName">{{deptManList.userName}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </el-form>


    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/project"
        new Vue({
            el: '#app',
            data:function () {
                return{
                    sysUser:'',
                    deptLeaderList:[],
                    deptManList:[],
                    transportations : ['飞机', '高铁', '火车', '客车','自驾','其他'],
                    Monday:{
                        projectDate:'',
                        days:'',
                        morning:{
                            projectTime:'上午',
                            visitList:[
                                {
                                    visitUnit:'',
                                    visitDept:'',
                                    visitPeople:'',
                                    visitTarget:'',
                                    fromMan:[],
                                    transportation:[],
                                }
                            ]
                        },
                        afternoon:{
                            projectTime:'下午',
                            visitList:[
                                {
                                    visitUnit:'',
                                    visitDept:'',
                                    visitPeople:'',
                                    visitTarget:'',
                                    fromMan:[],
                                    transportation:[],
                                }
                            ]
                        }
                    },
                    Tuesday:{
                        days:'',
                        projectDate:'',
                        morning:{
                            projectTime:'上午',
                            visitList:[
                                {
                                    visitUnit:'',
                                    visitDept:'',
                                    visitPeople:'',
                                    visitTarget:'',
                                    fromMan:[],
                                    transportation:[],
                                }
                            ]
                        },
                        afternoon:{
                            days:'',
                            projectTime:'下午',
                            visitList:[
                                {
                                    visitUnit:'',
                                    visitDept:'',
                                    visitPeople:'',
                                    visitTarget:'',
                                    fromMan:[],
                                    transportation:[],
                                }
                            ]
                        }
                    },
                    Wednesday:{
                        days:'',
                        projectDate:'',
                        morning:{
                            projectTime:'上午',
                            visitList:[
                                {
                                    visitUnit:'',
                                    visitDept:'',
                                    visitPeople:'',
                                    visitTarget:'',
                                    fromMan:[],
                                    transportation:[],
                                }
                            ]
                        },
                        afternoon:{
                            projectTime:'下午',
                            visitList:[
                                {
                                    visitUnit:'',
                                    visitDept:'',
                                    visitPeople:'',
                                    visitTarget:'',
                                    fromMan:[],
                                    transportation:[],
                                }
                            ]
                        }
                    },
                    Thursday:{
                        days:'',
                        projectDate:'',
                        morning:{
                            projectTime:'上午',
                            visitList:[
                                {
                                    visitUnit:'',
                                    visitDept:'',
                                    visitPeople:'',
                                    visitTarget:'',
                                    fromMan:[],
                                    transportation:[],
                                }
                            ]
                        },
                        afternoon:{
                            projectTime:'下午',
                            visitList:[
                                {
                                    visitUnit:'',
                                    visitDept:'',
                                    visitPeople:'',
                                    visitTarget:'',
                                    fromMan:[],
                                    transportation:[],
                                }
                            ]
                        }
                    },
                    Friday:{
                        days:'',
                        projectDate:'',
                        morning:{
                            projectTime:'上午',
                            visitList:[
                                {
                                    visitUnit:'',
                                    visitDept:'',
                                    visitPeople:'',
                                    visitTarget:'',
                                    fromMan:[],
                                    transportation:[],
                                }
                            ]
                        },
                        afternoon:{
                            projectTime:'下午',
                            visitList:[
                                {
                                    visitUnit:'',
                                    visitDept:'',
                                    visitPeople:'',
                                    visitTarget:'',
                                    fromMan:[],
                                    transportation:[],
                                }
                            ]
                        }
                    },
                }
            },
            created() {
                this.getWeakDate();
                this.getMyDept()
                this.getMy();
            },
            methods:{
                getWeakDate(){
                    let _this = this;
                    var now = new Date();
                    var nowTime = now.getTime() ;
                    var day = now.getDay() || 7;
                    var oneDayLong = 24*60*60*1000 ;
                    var MondayTime = nowTime - (day-1)*oneDayLong  ;
                    for (let i = 0; i<5;i++){
                        var tmpDate = new Date(MondayTime);
                        tmpDate=tmpDate.setDate(tmpDate.getDate()+i);
                        tmpDate=new Date(tmpDate);
                        var mondayDateStr = tmpDate.getFullYear()+"-"
                        mondayDateStr += (tmpDate.getMonth()+1)<10? "0"+(tmpDate.getMonth()+1)+'-':(tmpDate.getMonth()+1)+'-';
                        mondayDateStr += tmpDate.getDate()<10? "0"+(tmpDate.getDate()):(tmpDate.getDate());
                        let days = tmpDate.getDay();
                        switch (days) {
                            case 1:
                                days = '星期一';
                                this.Monday.projectDate = mondayDateStr;
                                this.Monday.days= days
                                break;
                            case 2:
                                this.Tuesday.projectDate = mondayDateStr;
                                days = '星期二';
                                this.Tuesday.days= days
                                break;
                            case 3:
                                this.Wednesday.projectDate = mondayDateStr;
                                days = '星期三';
                                this.Wednesday.days= days
                                break;
                            case 4:
                                this.Thursday.projectDate = mondayDateStr;
                                days = '星期四';
                                this.Thursday.days= days
                                break;
                            case 5:
                                this.Friday.projectDate = mondayDateStr;
                                days = '星期五';
                                this.Friday.days= days
                                break;
                        }
                    }
                },
                getMy(){
                    let _this = this;
                    axios.post('/system/project/getMyInfo' ).then(function (res) {
                        _this.sysUser = res.data.data
                    })
                        .catch(function (error) {

                        });

                },
                getMyDept(){
                    let _this = this;
                    axios.post('/system/project/getMyDeptMans' ).then(function (res) {
                       let data = res.data.data;
                          _this.deptManList = data[0];
                          _this.deptLeaderList = data[1];
                    })
                        .catch(function (error) {
                        });

                },
                addMondayMorning(){
                    let _this = this;
                    let project ={
                        visitUnit:'',
                        visitDept:'',
                        visitPeople:'',
                        visitTarget:'',
                        fromMan:[],
                        transportation:[],
                    }
                    _this.Monday.morning.visitList.push(project);
                },
                addMondayAfternoon(){
                    let _this = this;
                    let project ={
                        visitUnit:'',
                        visitDept:'',
                        visitPeople:'',
                        visitTarget:'',
                        fromMan:[],
                        transportation:[],
                    }
                    _this.Monday.afternoon.visitList.push(project);
                }
            }

        })
    </script>
</body>
</html>